import { defineComponent, h } from 'vue'
// 正确的 AG Grid 参数类型定义
// 使用官方的 ICellRendererParams 而不是自定义的 IAgGridParams
import type { ICellRendererParams } from 'ag-grid-community'
import type { IOlympicData } from '@/views/types'

export default defineComponent({
  template: `
  <div class="total-value-renderer">
    <span>{{ country }}</span>
    <el-button type="primary" size="small" @click="buttonClicked">选择性别1</el-button>
  </div>
  <!-- 性别选择对话框 -->
  <el-dialog
    v-model="showGenderSelector"
    title="选择性别"
    width="400px"
    :close-on-click-modal="false"
    @close="closeSelector"
    append-to-body
  >
    <div class="gender-options">
      <el-radio-group v-model="selectedGender" class="gender-radio-group">
        <el-radio label="男" class="gender-radio">
          <span class="gender-label">男</span>
        </el-radio>
        <el-radio label="女" class="gender-radio">
          <span class="gender-label">女</span>
        </el-radio>
      </el-radio-group>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeSelector">取消</el-button>
        <el-button type="primary" @click="submitGender" :disabled="!selectedGender">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
`,
  render() {
    return h('div', '123')
  },

  // 定义 Props
  props: {
    params: {
      type: Object as () => ICellRendererParams<IOlympicData, IOlympicData['gender']>,
      required: true,
    },
  },

  // 定义状态
  data() {
    return {
      country: '' as string,
      showGenderSelector: false as boolean,
      selectedGender: '' as string,
    }
  },

  // 生命周期钩子：在组件挂载后执行初始化
  mounted() {
    this.country = String(this.params.valueFormatted || this.params.value || '')
    this.selectedGender = this.params.data?.gender || ''
  },

  // 方法
  methods: {
    buttonClicked() {
      this.showGenderSelector = true
    },

    closeSelector() {
      this.showGenderSelector = false
      this.selectedGender = this.params.data?.gender || ''
    },

    submitGender() {
      if (this.selectedGender && this.params.node && this.params.column) {
        // 使用 AG Grid 的 setDataValue 方法更新数据
        this.params.node.setDataValue(this.params.column.getId(), this.selectedGender)

        console.log(`性别已更新为: ${this.selectedGender}`)
        this.closeSelector()
      }
    },
  },
  styles: `
    .total-value-renderer {
      color: blue;
      position: relative;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .gender-options {
      padding: 20px 0;
    }

    .gender-radio-group {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .gender-radio {
      display: flex;
      align-items: center;
      padding: 12px 16px;
      border: 1px solid #dcdfe6;
      border-radius: 6px;
      transition: all 0.3s;
      cursor: pointer;
    }

    .gender-radio:hover {
      border-color: #409eff;
      background-color: #f5f7fa;
    }

    .gender-radio.is-checked {
      border-color: #409eff;
      background-color: #ecf5ff;
    }

    .gender-label {
      font-size: 14px;
      color: #606266;
      margin-left: 8px;
    }

    .dialog-footer {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }

    /* 自定义 Element Plus 组件样式 */
    :deep(.el-dialog__header) {
      border-bottom: 1px solid #ebeef5;
      padding: 20px 20px 15px;
    }

    :deep(.el-dialog__body) {
      padding: 20px;
    }

    :deep(.el-dialog__footer) {
      border-top: 1px solid #ebeef5;
      padding: 15px 20px 20px;
    }

    :deep(.el-radio__input.is-checked + .el-radio__label) {
      color: #409eff;
    }

    :deep(.el-radio__input.is-checked .el-radio__inner) {
      border-color: #409eff;
      background: #409eff;
    }
  `,
})
